<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #div1 {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    left: 0;
    top: 50px;
  }

  #div2 {
    width: 1px;
    height: 300px;
    position: absolute;
    left: 300px;
    top: 0;
    background: black;
  }
</style>

<body>
  <input type="button" value="开始运动" onclick="btn1()" />
  <div id="div1"></div>
  <div id="div2"></div>

  <script>
    let div1 = document.getElementById("div1")

    function btn1() {
      setInterval(() => {
        let speed = (300 - div1.offsetLeft) / 5
        speed = speed > 0? Math.ceil(speed) : Math.floor(speed)
        div1.style.left = div1.offsetLeft + speed + "px"

      }, 30);
    }


  </script>


</body>

</html>